Skip to main content

📏 Adaptive layout

The Adaptive Layout feature in AppStruct allows you to create responsive designs for your application, ensuring that your app’s layout adapts seamlessly to different devices (desktop, tablet, mobile). This feature provides flexibility in styling and customization, allowing you to adjust the appearance of components for specific platforms, which results in a consistent and optimized user experience across all devices.

This guide will explain how to effectively use the Adaptive Layout feature to tailor your app for different devices.

Accessing the Adaptive Layout Menu​

  1. Navigate to the Canvas area in your AppStruct workspace, where your app screens are displayed.
  2. Click on the component (e.g., button, image) that you want to configure using the Adaptive Layout feature.
  3. Once the component is selected, the Left Toolbar will appear.
  4. In the Left Toolbar, click on the "Adaptive Layout" tab. This will bring up the options for configuring visibility and style adjustments for different devices.

Configuring Visibility for Devices​

  1. Under the "Adaptive Layout" tab, you will see the section labeled "Visible on:".
  2. Choose which devices the selected component will be visible on by clicking the Desktop, Tablet, or Mobile icons.
  3. If a device is deselected, the component will not be visible on that device.
  4. Example: If you want a button to be visible only on mobile devices, select Mobile and deselect Desktop and Tablet.
  5. Confirm the visibility settings to ensure the component appears as intended on the desired devices.

Styling for Specific Devices​

You can apply platform-specific styles to components to adjust their appearance based on the screen size.

  1. Under the Adaptive Layout tab, you will find three icons for Desktop, Tablet, and Mobile.
  2. Click on the specific icon to apply styling settings for that particular device.
  3. You can modify attributes like Size, Position, Corners, Colors, Text, etc., specifically for each platform. Example: For mobile devices, you may want to adjust the size of a button to make it larger for easier tapping, while for desktop, you may adjust its position.
  4. Once you have customized the component for a particular device, move to the next platform icon (if needed) and repeat the process to apply specific styles for other devices.

Test Your Layout​

Once your Adaptive Layout configurations are complete, it is crucial to save and test them to ensure everything works correctly on different devices.

  1. Click on the "Preview" button located in the Up Toolbar to view your project in preview mode.
  2. In preview mode, toggle between different device views (Desktop, Tablet, Mobile) to ensure that your Adaptive Layout settings work as expected.

Best Practices​

To make the best use of the Adaptive Layout feature, consider the following best practices:

  1. Test on Real Devices:
    • While preview mode is useful, it is always best to test your app on real devices to ensure the design looks good on different screen sizes.
  2. Prioritize User Experience:
    • Adjust components such as buttons, input fields, and images for mobile to ensure they are easy to interact with.
  3. Keep Layouts Simple:
    • Avoid overcomplicating the layout for smaller devices. Simplify content for tablets and mobile to enhance readability and usability.
  4. Use Platform-Specific Styles Judiciously:
    • Apply different styles only when necessary to ensure consistency in design across platforms.

Troubleshooting​

If you encounter issues with the Adaptive Layout feature, refer to the troubleshooting guide below:

Issue 1: Component Not Visible on Desired Device

  • Solution:
    • Verify that the Visibility settings are correctly configured under the Adaptive Layout tab.
    • Ensure that the component is not hidden by other overlapping elements on that specific device.

Issue 2: Styling Not Applied Properly

  • Solution:
    • Ensure that you are modifying the settings under the correct device icon (Desktop, Tablet, or Mobile).
    • Confirm that the Default settings are not overriding the device-specific styles.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].